<template>
    <view>
        <!-- 切换 -->
        <!-- <view class="cut" v-for="(item,index) in array" :key="index">
            <view class="useing" @tap="bindCut(index)">
                {{item.useing}}
            </view>
        </view> -->
        <!-- <view class="nav">
            <view class="nav-name" v-for="(item,index) in array" :key="index" @tap="bindCut(index)">
                <view class="nav-name-in" :class="{act:index === current}">{{item.useing}}</view>
            </view>
        </view> -->

        <!-- 使用中下显示 -->
        <view class="useContent" v-for="(item,index) in price" :key="index">
            <!-- <view class="useContent-price">￥{{item.total_fee}}</view> -->
            <view class="useContent-in">
                <view class="useContent-in-company" style="width:680rpx">
                    <text>
                        {{item.company_name}}
                    </text>
                    <text style="font-size:28rpx">{{item.created_at}}</text>
                </view>
                <view class="useContent-in-place">
                    <text>公司名称:{{item.equipment_name}}</text>
                </view>
                <view class="useContent-in-date" v-if="item.pay_status == 1">
                    <text>有效期:</text>
                    <text>{{item.pay_time ||" "}}</text>
                    <text style="margin:0 10rpx">至</text>
                    <text>{{item.expire_time ||" "}}</text>
                </view>
                <view class="useContent-in-date" v-if="item.pay_status== 2">
                    <!-- <text>有效期:</text> -->
                    <text>待支付</text>
                    <!-- <text>{{item.expire_time || " "}}</text> -->
                </view>
                <button class="mini-btn" type="default" size="mini" @tap="bindButtom(item)" v-show="item.pay_status == 1">续费</button>
                <button class="mini-btn" type="default" size="mini" @tap="bindButtom(item)" v-show="item.pay_status == 2">付款</button>
            </view>
        </view>

        <!-- 已使用下显示 -->
        <view class="useContent" v-show="current === 1" v-for="(item,index) in price2" :key="index">
            <view class="useContent-price">￥{{item.price}}</view>
            <view class="useContent-in">
                <view class="useContent-in-company">
                    {{item.name}}
                </view>
                <view class="useContent-in-place">
                    <text>{{item.named}}</text>
                    <text>{{item.place}}</text>
                </view>
                <view class="useContent-in-date">
                    <text>有效期:</text>
                    <text>{{item.date}}</text>至
                    <text>{{item.dated}}</text>
                </view>
                <img :src="item.src" class="mini-btn2">
            </view>
        </view>
    </view>
</template>

<script>
import {
    request
} from "../../../comon/js/request.js"
export default {
    data() {
        return {
            current: 0,
            array: [{
                useing: "使用中",
            }, {
                useing: "已使用",
            }],
            price: [],
            price2: []
        }
    },
    onShow() {
        this.getOrderId()
    },
    methods: {
        selceId(item) {
            console.log(item.oid)
        },
        bindCut(index) {
            console.log(index)
            this.current = index
        },
        bindButtom(item) {
            console.log(item.id)
            uni.navigateTo({
                url: `../pay/newpay/newpay?oid=${item.oid}&id=${item.id}&company_name=${item.company_name}&equipment_name=${item.equipment_name}&expire_time=${item.expire_time}`
            })
        },
        //获取订单id
        getOrderId() {
            request({
                url: "v1/order/list",
                method: "GET"
            }).then(res => {
                if (res.data.errorcode === 401) {
                    uni.showModal({
                        title: res.data.messages,
                        showCancel: false
                    });
                } else {
                    res.data.result.list.data.map(item => {
                        item.created_at = item.created_at
                        item.expire_time = item.expire_time
                        console.log(item.created_at)
                    })
                    this.price = res.data.result.list.data
                }
            })
        }
    }
}
</script>

<style lang="less">
.act {
    font-size: 24rpx;
    color: #0062A2;
    text-align: center;
    line-height: 24rpx;
    border-bottom: 1rpx solid #0062A2
}

.nav {
    display: flex;
    height: 100rpx;

    .nav-name {
        flex: 1;
        width: 84rpx;
        line-height: 84rpx;
        text-align: center;

        .nav-name-in {
            line-height: 84rpx;
            font-size: 24rpx;
            text-align: center;
            line-height: 84rpx;

        }

    }

}

.useing {
    display: flex;
}

.useContent {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    height: 200rpx;
    width: 720rpx;
    background: #e8f0f4;
    border: 0 solid #CECECE;
    border-radius: 2rpx;

    .useContent-price {
        // flex: 1;
        width: 220rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40rpx;
        color: #222222;
        letter-spacing: 0;
        text-align: right;
    }

    .useContent-in {
        border: 1rpx solid #f2f2f2;
        flex: 3;
        font-size: 28rpx;
        position: relative;
        padding-left: 28rpx;

        .useContent-in-company {
            font-size: 30rpx;
            display: flex;
            justify-content: space-between;
            margin-top: 20rpx;
            margin-bottom: 30rpx;
            padding-left: 10rpx;
            color: #333333;
            letter-spacing: 0;
            line-height: 28rpx;
        }

        .useContent-in-place {
            width: 500rpx;
            display: flex;
            justify-content: space-between;
            margin-bottom: 20rpx;
            padding-left: 10rpx;
            font-size: 28rpx;
            color: #333333;
            letter-spacing: 0;
            line-height: 28rpx;

        }

        .useContent-in-date {
            margin-top: 25rpx;
            // width: 750rpx;
            justify-content: space-between;
            align-content: center;
            // display: flex;
            padding-left: 10rpx;
            font-size: 25rpx;
            color: #959595;
            letter-spacing: 0;

        }

        .mini-btn {
            position: absolute;
            color: white;
            background: #169bd5;
            top: 115rpx;
            left: 560rpx;
            width: 130rpx;
            height: 60rpx;
            background-image: linear-gradient(-180deg, #B5F657 0%, #3ABC05 100%);
            border-radius: 24rpx;
            line-height: 60rpx;

        }

        .mini-btn2 {
            position: absolute;
            top: -12rpx;
            left: 375rpx;
            width: 140rpx;
            height: 140rpx;

        }
    }
}
</style>
